<template>
    <div>
        <BreadCrumb></BreadCrumb>
        <div class="header">
            <div class="form">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="分类名称">
                    <el-input v-model="formInline.name" size="small" placeholder="请输入分类名称"></el-input>
                </el-form-item>
                <el-form-item label="分类类型">
                    <el-autocomplete
                        placeholder="请输入分类类型"
                        v-model="formInline.type"
                        :fetch-suggestions="querySearchAsync"
                    ></el-autocomplete>
                <!-- <el-input v-model="formInline.type" size="small" placeholder="分类类型"></el-input> -->
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" @click="onSubmit()">查询</el-button>
                </el-form-item>
            </el-form>
            </div>
            <div class="group">
            <el-button size="small" type="warning" icon="el-icon-plus" @click="addDishCategory()">添加菜品分类</el-button>
            <el-button size="small" type="success" icon="el-icon-plus" @click="addSetmealCategory()">添加套餐分类</el-button>
            <!-- <el-button size="small" type="danger" icon="el-icon-delete" @click="allDelete">批量删除</el-button> -->
            <!-- <el-button size="small" type="danger" icon="el-icon-delete">批量停售</el-button> -->
            </div>
        </div>
        <div class="content">
            <el-table
                :row-class-name="tableRowClassName"
                :data="tableData"
                style="width: 100%" border :default-sort = "{prop: 'date', order: 'descending'}"
            >
                <el-table-column
                    align="center"
                    type="selection"
                    width="55">
                </el-table-column>
                <el-table-column
                    sortable
                    align="center"
                    prop="name"
                    label="分类名称"
                    width="180">
                </el-table-column>
                <el-table-column
                    sortable
                    align="center"
                    prop="type"
                    label="分类类型"
                    width="180">
                    <template slot-scope="scope">
                        <span v-if="scope.row.type==1">
                            菜品分类
                        </span>
                        <span v-else>
                            套餐分类
                        </span>
                    </template>
                </el-table-column>
                <el-table-column
                    sortable
                    align="center"
                    prop="sort"
                    label="排序"
                    width="180">
                </el-table-column>
                <el-table-column
                    sortable
                    align="center"
                    prop="status"
                    label="状态"
                    width="180">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status==0" style="color: red;">
                            禁用
                        </span>
                        <span v-else style="color: green;">
                            启用
                        </span>
                    </template>
                </el-table-column>
                <el-table-column
                    sortable
                    align="center"
                    prop="update_time"
                    label="更新时间"
                    width="180">
                </el-table-column>
                <el-table-column label="操作"  align="center">
                    <template slot-scope="scope">
                        <el-button
                            icon="el-icon-edit"
                            size="mini"
                            type="primary"
                            @click="handleEdit(scope.$index, scope.row)"
                        >修改</el-button>
                        <el-button
                            icon="el-icon-delete"
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)"
                        >删除</el-button>
                        <el-button
                            v-if="scope.row.status==1"
                            icon="el-icon-warning"
                            size="mini"
                            type="warning"
                            @click="handleChange(scope.$index, scope.row)"
                        >停用</el-button>
                        <el-button
                            v-else
                            icon="el-icon-warning"
                            size="mini"
                            type="success"
                            @click="handleChange(scope.$index, scope.row)"
                        >启用</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <Pagination :total="total" :pageSize="pageSize" @CurrentChange="getRecords" :page="page" obj="category"></Pagination>
            </div>
            <div class="dialogContainer">
                <el-dialog
                    :title="dialogTitle"
                    :visible.sync="dialogVisible"
                >
                <div class="content">
                    <el-form
                        :model="ruleForm"
                        :rules="rules" ref="ruleForm"
                    >
                        <el-form-item label="分类名称" prop="name">
                            <el-input v-model="ruleForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="排序" prop="sort">
                            <el-input v-model="ruleForm.sort"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="confirmEdit()">确 定</el-button>
                </span>
                </el-dialog>
            </div>
        </div>
    </div>
</template>

<script>
import Pagination  from '@/components/pagination/myPagination.vue';
import axios from 'axios';
export default {
    components:{Pagination},
    data(){
        return{
            total:60,
            pageSize:6,
            page:1,
            formInline: {
                type:'',
                name: '',
            },
            tableData:[],
            dialogTitle:'',
            dialogVisible:false,
            nowId:'',
            operate:'',
            addType:'',
            ruleForm:{
                name:'',
                sort:''
            },
            rules:{
                name: [
                    { required: true, message: '请输入分类名称', trigger: 'blur' },
                ],
                sort: [
                    { required: true, message: '请输入排序', trigger: 'blur' },
                ],
            },
            allStatus:[],
            timeout:null,
            state:''
        }
    },
    mounted(){
        axios({
            url:`http://localhost:8080/kfc/admin/category/page?page=${this.page}&pageSize=${this.pageSize}`,
            method:'get',
            headers:{
                token:localStorage.getItem('jwt')
            }
        }).then(res=>{
            this.tableData=res.data.data.categoryList
            console.log(this.tableData);
        })
        this.allStatus=this.loadAll()
    },
    methods:{
        tableRowClassName({row}) {
            if(row.status==0){
                return 'warning-row'
            }
        },
        handleChange(index,row){
            if(this.tableData[index].status==0){
                this.tableData[index].status=1
            }
            else{
                this.tableData[index].status=0
            }
            this.tableRowClassName
            axios({
                url:`http://localhost:8080/kfc/admin/category/status?id=${row.id}`,
                method:'post',
                headers:{
                    token:localStorage.getItem('jwt')
                },
            })
        },
        handleDelete(index,row){
            axios({
                url:`http://localhost:8080/kfc/admin/category/del?id=${row.id}`,
                method:'delete',
                headers:{
                    token:localStorage.getItem('jwt')
                }
            }).then(res=>{
                if(res.status==200){
                    this.$message({
                        type:'success',
                        message:'删除成功'
                    })
                    axios({
                        url:`http://localhost:8080/kfc/admin/category/page?page=${this.page}&pageSize=${this.pageSize}`,
                        method:'get',
                        headers:{
                            token:localStorage.getItem('jwt')
                        }
                    }).then(res=>{
                        this.tableData=res.data.data.categoryList
                        console.log(this.tableData);
                    })
                }
                else{
                    this.$message.error('删除失败');
                }
            })
        },
        handleEdit(index,row){
            console.log(index,row);
            this.dialogTitle='修改分类'
            this.nowId=row.id
            this.ruleForm.name=row.name
            this.ruleForm.sort=row.sort
            this.operate='update'
            this.dialogVisible=true
        },
        async confirmEdit(){
            if(this.operate=='update'){
                await axios({
                    url:`http://localhost:8080/kfc/admin/category/update`,
                    method:'put',
                    headers:{
                        token:localStorage.getItem('jwt')
                    },
                    data:{
                        id:this.nowId,
                        name:this.ruleForm.name,
                        sort:this.ruleForm.sort
                    }
                }).then(res=>{
                    if(res.status==200){
                        this.$notify({
                            title: '成功',
                            message: '修改成功',
                            type: 'success'
                        });
                        axios({
                            url:`http://localhost:8080/kfc/admin/category/page?page=${this.page}&pageSize=${this.pageSize}`,
                            method:'get',
                            headers:{
                                token:localStorage.getItem('jwt')
                            }
                        }).then(res=>{
                            this.tableData=res.data.data.categoryList
                            console.log(this.tableData);
                        })
                    }
                    else{
                        this.$notify.error({
                            title: '错误',
                            message: '修改失败'
                        });
                    }
                })
            }
            else if(this.operate=='add'){
                await axios({
                    url:'http://localhost:8080/kfc/admin/category',
                    method:'post',
                    headers:{
                        token:localStorage.getItem('jwt')
                    },
                    data:{
                        name:this.ruleForm.name,
                        sort:this.ruleForm.sort,
                        type:this.addType
                    }
                }).then(res=>{
                    if(res.status==200){
                        this.$notify({
                            title: '成功',
                            message: '添加成功',
                            type: 'success'
                        });
                        axios({
                            url:`http://localhost:8080/kfc/admin/category/page?page=${this.page}&pageSize=${this.pageSize}`,
                            method:'get',
                            headers:{
                                token:localStorage.getItem('jwt')
                            }
                        }).then(res=>{
                            this.tableData=res.data.data.categoryList
                            console.log(this.tableData);
                        })
                    }
                    else{
                        this.$notify.error({
                            title: '错误',
                            message: '添加失败'
                        });
                    }
                })
            }
            this.dialogVisible = false
        },
        addDishCategory(){
            this.dialogTitle='新增菜品分类'
            this.ruleForm.name=''
            this.ruleForm.sort=''
            this.operate='add'
            this.addType=1
            this.dialogVisible=true
        },
        addSetmealCategory(){
            this.dialogTitle='新增套餐分类'
            this.ruleForm.name=''
            this.ruleForm.sort=''
            this.operate='add'
            this.addType=2
            this.dialogVisible=true
        },
        getRecords(val){
            this.tableData=val
        },
        onSubmit(){
            let status=''
            if(this.formInline.type=='菜品分类'){
                status=1
            }
            else if(this.formInline.type=='套餐分类'){
                status=2
            }
            else{
                status=''
            }
            axios({
                url:`http://localhost:8080/kfc/admin/category/page?name=${this.formInline.name}&page=${this.page}&pageSize=${this.pageSize}&type=${status}`,
                method:'get',
                headers:{
                    token:localStorage.getItem('jwt')
                },
            }).then(res=>{
                this.tableData=res.data.data.categoryList
            })
        },
        querySearchAsync(queryString, cb){
            var allStatus=this.allStatus
            var results=queryString?allStatus.filter(this.createStateFilter(queryString)) : allStatus;
            clearTimeout(this.timeout)
            this.timeout=setTimeout(()=>{
                cb(results)
            },0*Math.random())
        },
        createStateFilter(queryString) {
            return (state) => {
                return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },
        loadAll(){
            return[
                {"value":"菜品分类"},
                {"value":"套餐分类"}
            ]
        }
    }
}
</script>

<style>
    .el-table .warning-row {
        background: oldlace;
    }
</style>

<style lang="less" scoped>
  .header{
    background: #FFF;
    margin-bottom: 20px;
    padding: 10px;
    .el-form-item{
      margin-bottom: 16px;
    }
    .group{
      border: 1px solid #eee;
      padding: 8px;
    }
  }
  .content{
    background: #FFF;
    .pagination{
      padding: 10px;
    }
  }
</style>